<template>
  <div class="base__table">
    <div class="base__table-panel">
      <div class="base__table-title">
        <div class="text">产品列表</div>
        <div class="actions">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="isShowCreateDialog = true">创建产品</el-button>
        </div>
      </div>
      
      <base-search ref="baseSearch" :formList="searchFormList" @search="search"></base-search>
  
      <el-table :data="tableData" v-loading="tableLoading">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="产品编号" prop="code"></el-table-column>
        <el-table-column label="产品名称" prop="name"></el-table-column>
        <el-table-column label="产品类型" prop="type">
          <template slot-scope="{ row }">
            {{ transformDisplayName(dict_productionType, row.type) }}
          </template>
        </el-table-column>
        <el-table-column label="接口数量" prop="interfaceNum"></el-table-column>
        <el-table-column label="ProductKey" prop="productKey"></el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="{ row }">{{ format_dateTime(row.createTime) }}</template>
        </el-table-column>
        
        <el-table-column label="操作">
          <table-action slot-scope="{ row }">
            <table-action-item title="修改" class="iconfont icon-edit" @takeAction="showEditDialog(row)"></table-action-item>
            <table-action-item title="删除" class="iconfont icon-delete" @takeAction="handleDeleteProduction(row)"></table-action-item>
          </table-action>
        </el-table-column>
      </el-table>
      
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>

      
      <!-- 创建产品 -->
      <el-dialog
        :visible.sync="isShowCreateDialog"
        :close-on-click-modal="false"
        title="创建产品"
        width="750px">
        <create
          v-if="isShowCreateDialog"
          @success="createSuccess"
          @close="isShowCreateDialog=false">
        </create>
      </el-dialog>
      
      <!-- 修改产品信息 -->
      <el-dialog
        :visible.sync="isShowEditDialog"
        :close-on-click-modal="false"
        title="修改产品信息"
        width="750px">
        <edit
          v-if="isShowEditDialog"
          :id="currentActionRow.id"
          @success="editSuccess"
          @close="isShowEditDialog=false">
        </edit>
      </el-dialog>

    </div>
  </div>
</template>


<script>

import { transformDisplayName, dict_productionType } from '@/utils/dictionary'
import { format_null, format_dateTime } from '@/utils/formatter'

import BaseSearch from '@/components/BaseSearch'
import TableAction from '@/components/table-action/TableAction'
import TableActionItem from '@/components/table-action/TableActionItem'

import Create from './Create'
import Edit from './Edit'

import { listApi, deleteProductionApi } from '@/api/modules/production'

export default {
  name: 'ProductionTable',
  components: {
    BaseSearch,
    TableAction,
    TableActionItem,
    Create,
    Edit
  },
  data () {
    return {
      dict_productionType,
      
      searchFormList: [
        { label: '产品编号', prop: 'code', type: 'text' },
        { label: '产品名称', prop: 'name', type: 'text' },
        { label: '产品类型', prop: 'type', type: 'select', options: dict_productionType },
        { label: 'ProductKey', prop: 'productKey', type: 'text' },
      ],
      searchForm: {
        code: null,
        name: null,
        type: null,
        productKey: null
      },

      tableData: [],
      tableLoading: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },


      isShowCreateDialog: false,
      isShowEditDialog: false,

      currentActionRow: null,

    }
  },
  methods: {
    format_dateTime,
    transformDisplayName,

    
    search(formData) {
      this.pageInfo.pageNum = 1
      this.searchForm = { ...formData }
      this.getList()
    },
    async getList() {
      try {

        this.tableLoading = true

        const params = {
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          ...this.searchForm
        }
        const res = await listApi(params)

        const { list, total } = res.data
        this.tableData = format_null(list)
        this.pageInfo.total = total

      } catch (err) {
        console.error(err)
      }
      this.tableLoading = false

    },
    handlePageSizeChange(pageSize) {
      this.pageInfo.pageSize = pageSize
      this.getList()
    },
    handlePageNumChange(pageNum) {
      this.pageInfo.pageNum = pageNum
      this.getList()
    },
    

    // 创建
    showCreateDialog() {
      this.isShowCreateDialog = true
    },
    createSuccess() {
      this.isShowCreateDialog = false
      this.getList()
    },
    // 修改
    showEditDialog(row) {
      this.currentActionRow = {...row}
      this.isShowEditDialog = true
    },
    editSuccess() {
      this.getList()
      this.isShowEditDialog = false
    },
    // 删除
    async handleDeleteProduction (row) {
      const { id, name } = row
      try {
        await this.$confirm(
          `你确定要删除产品【${ name }】吗？`,
          '提示',
          {
            type: 'warning'
          }
        )

        const params = { id }
        await deleteProductionApi(params)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getList()
      } catch (err) {
        console.error(err)
      }
    }

  },
  mounted() {
    this.getList()
  }
}
</script>


<style lang="less" scoped>
@import '../../styles/tablePanel.less';
</style>